<template>
	<view>
		<div :id="index" draggable="true" style="width: 95%;padding: 20px 0;" class="aaaa"
			v-for="(item,index) in field_data_list" :key="index" :itemkey="item.key" @mousedown="mousedown">
			<div :id="index" :class="items_index==index?'xz_boxxx':'boxxx'" draggable="true">

				<template v-if="item.input_box !='content'">

					<view class="banmi_flex a-c p-10" draggable="true" :id="index">
						<div v-if="item.value_type=='前端传值'" :id="index" class="f-14 c-7 m-l-10" style="width: 200rpx;">
							<text v-if="item.empty=='false'" class="cred">*</text>
							<text>{{item.name}}</text>
						</div>
						<div v-if="item.value_type=='前端传值'&&item.input_box=='text'" draggable="true" :id="index">
							<input draggable="true" :id="index" type="text" v-model="item.placeholder" class="b_y c-7"
								style="width: 700rpx;height: 40px;border: solid 2rpx #DCDCDC;margin-left: 20rpx;
  						padding: 0 20rpx">
						</div>
						<div v-if="item.value_type=='前端传值'&&item.input_box=='img'" draggable="true" :id="index">
							<upImg ref="upimg" :val='1' name="图片" :count="1" t_type="images" @confirm="confirm_img">
							</upImg>
						</div>
						<div v-if="item.value_type=='前端传值'&&item.input_box=='video'" draggable="true" :id="index">
							<upImg ref="upimg" :val='1' name="视频" :count="1" t_type="video" @confirm="confirm_video">
							</upImg>
						</div>

						<div v-if="item.value_type=='前端传值'&&item.input_box=='time'" draggable="true" :id="index">
							<uni-datetime-picker style="width: 700rpx;margin-left: 20rpx;
							padding: 0 20rpx" type="datetime" placeholder="请选择时间">
							</uni-datetime-picker>
						</div>
						<div v-if="item.value_type=='前端传值'&&item.input_box=='day'" draggable="true" :id="index">
							<uni-datetime-picker type="date" placeholder="请选择时间" style="width: 700rpx;margin-left: 20rpx;
							padding: 0 20rpx">
							</uni-datetime-picker>
						</div>
						<div v-if="item.value_type=='前端传值'&&item.input_box=='switch'" draggable="true" :id="index">
							<switch :checked="true" @change="changes_witch" />
						</div>
						<div v-if="item.value_type=='前端传值'&&item.input_box=='city'" draggable="true" :id="index">
							<uni-data-picker style="width: 740rpx;margin-left: 5rpx;height: 40px;padding: 0 20rpx"
								:localdata="provinceData">
							</uni-data-picker>
						</div>

						<div v-if="item.value_type=='前端传值'&&item.input_box=='business_time'" draggable="true"
							:id="index">
							<uni-datetime-lot style="width: 740rpx;margin-left: 5rpx;height: 40px;
							padding: 0 20rpx" placeholder="营业时间">
							</uni-datetime-lot>
						</div>

						<div v-if="item.value_type=='前端传值'&&item.input_box=='checkbox'" draggable="true" :id="index">
							<uni-data-checkbox :localdata="item.input_box_val" :value="item.input_box"
								mode="default"></uni-data-checkbox>
						</div>

						<div class="m-l-10 banmi_flex" v-if="item.value_type=='前端传值'&&item.input_box=='file_upload'"
							draggable="true" :id="index">
							<uni-easyinput :placeholder="item.placeholder">
							</uni-easyinput>
							<upKey class="m-l-10" :val='1' name="key">
							</upKey>
						</div>

						<div class="m-l-10 banmi_flex" v-if="item.value_type=='前端传值'&&item.input_box=='select'"
							draggable="true" :id="index" style="width: 300px;">
							<uni-data-select isdata="data" :localdata="item.input_box_val"
								:placeholder="item.placeholder">
							</uni-data-select>
						</div>

						<div class="m-l-10 banmi_flex" v-if="item.value_type=='前端传值'&&item.input_box=='colour'"
							draggable="true" :id="index" style="width: 300px;">
							<view class="banmi_input_val" @click="open_color('color')">
								<uni-easyinput v-model="find.color" placeholder="请输入color">
								</uni-easyinput>
							</view>
						</div>
 


						<div v-if="item.value_type=='后端生成'|| item.value_type=='固定值' " draggable="true" :id="index">
							<text class="c-7 m-l-20 f-13">{{item.value_type}}</text>
							<text class="cred f-13 m-l-10"> {{item.field}} = </text>
							<template v-if="item.value_type=='后端生成'">
								<text v-if="item.value ===''"> </text>
								<text class="cred f-13 m-l-10" v-else> {{h_list_validate[item.value]['name']}}</text>
							</template>
							<text class="cred f-13 m-l-10" v-if="item.value_type=='固定值'"> {{item.value}}</text>
						</div>
					</view>

				</template>




				<template v-if="item.input_box=='content'">
					<div class="p-20" draggable="true" :id="index">
						<div>
							<view class="banmi_input_name">
								<text v-if="item.empty=='false'" class="cred">*</text>
								<text>{{item.name}}</text>
							</view>
						</div>
						<div class="p-t-10" v-if="item.value_type=='前端传值'">
							<BmEditor @change="on_Editor" disabled="disabled" mode="default" :height="300"
								:placeholder="item.placeholder">
							</BmEditor>
						</div>
						<div v-if="item.value_type=='后端生成'|| item.value_type=='固定值' " draggable="true" :id="index">
							<text class="c-7 m-l-20">{{item.value_type}}</text>
							<text class="cred f-13">(固定和后端不显示在前端)</text>
						</div>
					</div>
				</template>

			</div>
		</div>

		<view class="" style="height: 300px;">

		</view> 
 
		<t-color-picker ref="colorPicker" @confirm="confirm_color"></t-color-picker>
	</view>
</template>

<script>
	import provinceData from '@/components/fd-picker/city-china.json';
	import popup from '@/uni_modules/uni-popup/components/uni-popup/popup.js'
	import DiyFieldWhere from './diy_field_where.vue';
	export default {
		components: {
			DiyFieldWhere
		},
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		props: {
			windowHeight: {
				type: Number,
				default () {
					return 0;
				}
			},
			h_list_validate: {
				type: Array,
				default () {}
			},
			field_list: {
				type: Array,
				default () {}
			},
			windowWidth: {
				type: Number,
				default () {
					return 0;
				}
			},

		},
		data() {
			return {
				find: {
					role_name: '',
				},
				field_data_list: [],
				items_index: '0',
				provinceData: provinceData
			}
		},
		mounted() {
			this.field_data_list = this.field_list

		},

		methods: {
			open_color(item) {
				// 打开颜色选择器
				this.color_item = item
				this.$refs.colorPicker.open();
			
			},
			confirm_color(e) {

			},
			changes_witch() {

			},
			on_Editor(e) {

			},
			mousedown(e) {

				var index = e.currentTarget.id;
				this.items_index = index;
				this.$emit('chat_items_index', this.items_index)
			},
			on_close() {
				this.popup.close()
			},
			subQuestion() {
				this.$emit('img_ok', this.zu_diy_list_find)
				this.popup.close()
			},


		}
	}
</script>

<style>
	.pass_0 {
		border: #C0C0C0 3px dashed;
		width: 465rpx;
	}

	.pass_0xz {
		border: solid 3px red;

		width: 465rpx;
	}

	.xz_boxxx {

		align-items: center;

		width: 100%;
		/* 	border: red 3px dashed; */
		border: solid 3px red;
	}

	.boxxx {

		align-items: center;

		width: 100%;
		border: #C0C0C0 3px dashed;

	}

	button {
		padding: 0;

		background: transparent;
	}

	.top_but {
		background-color: #F8F8F8;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 999;
		background-color: #F8F8F8;
		bottom: 288rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.sub_btn {

		height: 70rpx;
		width: 100rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}

	button::after {
		border: none;
	}
</style>